<template>
  <div class="radio-popup">
    <el-radio-group v-model="form.checked" class="ml-4" @change="radioChange">
      <el-radio v-for="(item, index) in list" :key="index" :label="item.value">{{ item.name }}</el-radio>
    </el-radio-group>
    <div class="number-input flex-between">
      <el-input-number v-model="form.value[0]" :precision="0" :step="1" :min="0"
        :max="form.value[1] ? form.value[1] : undefined" :placeholder="minPlaceholder" @change="inputChange" />
      <el-input-number v-model="form.value[1]" :precision="0" :step="1" :min="form.value[0] > 0 ? form.value[0] : 1" :max="100"
        :placeholder="maxPlaceholder" @change="inputChange" />
    </div>
    <el-slider v-model="form.value" range :step="1" :max="100" size="small"
      @change="sliderChange" />
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
const props = defineProps(['list', 'checked', 'minPlaceholder', 'maxPlaceholder']);
const emit = defineEmits(['change']);

const form = ref({
  checked: props.checked,
  value: [null, null]
});

const radioChange = () => {
  emit('change', form.value.checked);
  if (form.value.checked !== -1) {
    form.value.value = form.value.checked.toString().split('-');
  } else {
    form.value.value = [null, null];
  }
}
const inputChange = () => {
  let value = null;
  if (!form.value.value[0] && !form.value.value[1]) {
    value = -1;
  } else if (!form.value.value[0]) {
    value = `0-${form.value.value[1]}`;
  } else if (!form.value.value[1]) {
    value = form.value.value[0];
  } else {
    value = form.value.value.join('-');
  }
  form.value.checked = value;
  emit('change', value);
}
const sliderChange = e => {
  form.value.checked = e.join('-');
  emit('change', e.join('-'));
}
</script>

<style lang="less" scoped>
.radio-popup {
  padding: 10px 12px 12px;

  &::v-deep {
    .el-input-number .el-input__wrapper {
      padding: 0 !important;
    }

    .el-input-number__decrease,
    .el-input-number__increase {
      display: none;
    }

    .el-slider__button {
      border-color: #f85277 !important;
    }

    .el-slider__bar {
      background: #f85277 !important;
    }

    .el-input-number,
    .el-input {
      width: 77px;

      .el-input__wrapper {
        border-radius: 12px;
      }
    }

    .el-slider {
      width: 150px;
      margin: 0 auto;
    }
  }

  .number-input {
    margin: 16px 0;
  }
}
</style>
